<template>
  <div id="stationTop">
    <apexchart ref="count" type=bar height=370 :width="clientWidth" :options="chartOptions" :series="series" />
  </div>
</template>
<script>
export default {
  name: 'HomePage',
  data () {
    return {
      clientWidth: 1000,
      series: [],
      chartOptions: {
        chart: {
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '35%'
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: []
        },
        fill: {
          opacity: 1

        }
      }
    }
  },
  methods: {
  },
  mounted () {
    this.$nextTick(function () {
      this.clientWidth = document.getElementById('stationTop').parentNode.offsetWidth
    })
    this.$get(`suggest/listStationTopN`).then((r) => {
      let data = r.data
      console.log(r.data)
      let seriesData = []
      let labels = []
      for (let i in data) {
        seriesData.push(parseFloat(data[i].num))
        labels.push(data[i].station)
      }
      this.$refs.count.updateSeries([
        {
          name: 'top',
          data: seriesData
        }
      ], true)
      this.$refs.count.updateOptions({
        xaxis: {
          categories: labels
        },
        title: {
          text: '',
          align: 'center'
        }
      }, true, true)
    }).catch((r) => {
      console.error(r)
      this.$message.error('获取首页信息失败')
    })
  }
}
</script>
<style lang="less">
</style>
